<!DOCTYPE html>
<!-- saved from url=(0038)http://v3.bootcss.com/getting-started/ -->
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>HteOS参考文档</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/patch.css" rel="stylesheet">

<!-- Documentation extras -->
<link href="css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Favicons -->

<style id="holderjs-style" type="text/css"></style>
</head>
<body>
	<a class="sr-only sr-only-focusable"
		href="http://v3.bootcss.com/getting-started/#content">Skip to main
		content</a>

	<!-- Docs master nav -->
	<header class="navbar navbar-static-top bs-docs-nav" id="top"
		role="banner">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle collapsed" type="button"
					data-toggle="collapse" data-target=".bs-navbar-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a href="#" class="navbar-brand">HteOS</a>
			</div>
			<nav class="collapse navbar-collapse bs-navbar-collapse"
				role="navigation">
				<ul class="nav navbar-nav">
					<li class="active"><a href="index.html">起步</a></li>
					<!-- <li>
          <a href="http://v3.bootcss.com/css/">全局 CSS 样式</a>
        </li>
        <li>
          <a href="http://v3.bootcss.com/components/">组件</a>
        </li>
        <li>
          <a href="http://v3.bootcss.com/javascript/">JavaScript 插件</a>
        </li>
        <li>
          <a href="http://v3.bootcss.com/customize/">定制</a>
        </li> -->
				</ul>
			</nav>
		</div>
	</header>


	<!-- Docs page layout -->
	<div class="bs-docs-header" id="content">
		<div class="container">
			<h1>起步</h1>
			<p>介绍如何快速部署、启动HteOS。</p>

		</div>
	</div>

	<div class="container bs-docs-container">

		<div class="row">
			<div class="col-md-9" role="main">
				<div class="bs-docs-section">
					<h1 id="env" class="page-header">运行环境</h1>
					<p class="lead">目前HteOS的是基于Java平台，部署的前提是你的机器已经安装了Java集成开发环境</p>
					<h3>依赖下列运行环境及软件</h3>
					<ul>
						<li>JDK 1.6+</li>
						<li>Tomcat 6.0+</li>
						<li>MyEclipse 10+</li>
						<li>MySql 5+</li>
					</ul>
					<h3>单个软件安装教程</h3>
					<p>
						JDK安装配置教程参见：<a
							href="http://jingyan.baidu.com/article/bea41d435bc695b4c41be648.html"
							target="_blank">http://jingyan.baidu.com/article/bea41d435bc695b4c41be648.html</a>
						<br /> Tomcat安装教程参见：<a
							href="http://jingyan.baidu.com/article/624e7459a7d6e734e9ba5a70.html"
							target="_blank">http://jingyan.baidu.com/article/624e7459a7d6e734e9ba5a70.html</a><br />
						MyEclipse安装教程参见：<a
							href="http://jingyan.baidu.com/article/1709ad80cc27dd4635c4f060.html"
							target="_blank">http://jingyan.baidu.com/article/1709ad80cc27dd4635c4f060.html</a><br />
						MySql安装教程参见：<a
							href="http://jingyan.baidu.com/article/cdddd41c460f1953cb00e11b.html"
							target="_blank">http://jingyan.baidu.com/article/cdddd41c460f1953cb00e11b.html</a>
					</p>
					<h3>集成安装教程</h3>
					<p>
						JavaEE环境搭建参见：<a
							href="http://jingyan.baidu.com/article/cdddd41c460f1953cb00e11b.html"
							target="_blank">http://jingyan.baidu.com/article/5552ef472dffc5518efbc948.html</a>
					</p>
				</div>

				<div class="bs-docs-section">
					<h1 id="whats-included" class="page-header">项目结构</h1>

					<p class="lead">HteOS在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，</p>
					<div class="highlight">
						<pre>
							<code class="bash">HteOS/
├── WebRoot/ 				-> Web文件目录
│   ├── css 				-> CSS文件目录
│   ├── hteos 				-> 功能页面目录
│   ├── images 				-> 图片目录
│   └── js 				-> JS文件目录
├── src/ 				-> Java源代码
│   └── com
├── docs/ 				-> 项目文档目录
│   ├── api 				-> API文档目录
│   ├── db 				-> 数据库文件目录
│   └── reference 			-> 参考文档目录
├── .project
└── .classpath
</code>
						</pre>
					</div>

					<p>这个是整个HteOS的目录，由于HteOS是JavaScript框架，所以着重讲下WebRoot目录</p>
					<p class="lead">首先看css文件夹结构</p>
					<pre>
							<code class="bash">
css/
├── awesome/ 				-> FontAweson图标字体目录
│   └── font-awesome.min.css
├── bootstrap/ 				-> Bootstrap文件目录
│   └── bootstrap.min.css
├── fonts 				-> 字体文件目录
├── hteos
│   ├── hteos.common.css		-> 公共CSS
│   ├── hteos.icon.css 			-> 图标样式CSS
│   └── hteos.metro.css 		-> Metro桌面CSS
├── scrollbar 				-> 滚动条插件CSS
└── global.css

</code>
						</pre>
					<p class="lead">下面是js文件夹结构</p>
					<pre>
							<code class="bash">
js/
├── bootstrap/ 				-> Bootstrap插件文件夹
│   ├──	bootstrap.min.js 
│   └── respond.min.js 			-> 兼容IE8的插件
├── hteos/ 				-> HteOS主目录
│   ├── hteos.metro.js 			->Metro桌面主文件
│   ├── hteos-v1.1-dev.js 		->相关APP文件
│   └── hteos.common.js 		->公共文件
├── jquery -> jQuery文件目录
│   ├── jquery-1.9.1.min.js
│   ├── jquery-scrollbar.min.js 	-> scrollbar插件
│   └── jquery-ui.min.js 
└── html5shiv.min.js 			->兼容IE8的插件

</code>
						</pre>
				</div>

				<div class="bs-docs-section">
					<h1 id="grunt" class="page-header">导入项目</h1>
					<p class="lead">
						HteOS提供的源码是有MyEclipse导出的未编译的源码，需要导入到MyEclipse中运行</p>
					<div class="bs-callout bs-callout-warning" id="jquery-required">
						<h4>关于MyEclipse的版本</h4>
						<p>
							请注意，推荐使用<strong>MyEclipse10+</strong>的版本
						</p>
					</div>
					<p>
						导入步骤参见：<a
							href="http://jingyan.baidu.com/article/6181c3e074ba0d152ff15346.html"
							target="_blank">MyEclipse导入项目教程</a>
					</p>
				</div>

				<div class="bs-docs-section">
					<h1 id="examples" class="page-header">连接数据库</h1>
					<p class="lead">HteOS使用的数据库是MySql，所以在启动前需要安装数据库服务器并创建数据库实例</p>
					<p>
						创建好数据库之后，导入备份SQL文件：
						<code>hteos\docs\db\hteos.sql</code>
					</p>
					<p>
						创建数据库及导入教程：<a
							href="http://jingyan.baidu.com/article/6181c3e074ba0d152ff15346.html"
							target="_blank">http://jingyan.baidu.com/article/6181c3e074ba0d152ff15346.html</a>
					</p>
					<p>
						导入完成之后，修改项目的数据库连接，数据库配置文件路径：
						<code>hteos\src\com\hteos\configuration\jdbc\jdbc.properties</code>
					</p>
					<p>
					<pre>
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/hteos?useUnicode=true&amp;characterEncoding=UTF-8
jdbc.username=root
jdbc.password=3571571
jdbc.maximum.connection.count=40
jdbc.minimum.connection.count=5
jdbc.statistics=1m,15m,1h,1d
jdbc.simultaneous.build.throttle=30
						</pre>
					</p>
					<p>
						修改
						<code>jdbc.url</code>
						为创建的数据库地址， 修改
						<code>jdbc.username</code>
						为创建的数据库的用户名，修改
						<code>jdbc.password</code>
						为创建的数据库的密码。
					</p>
				</div>

				<div class="bs-docs-section">
					<h1 id="community" class="page-header">启动</h1>

					<p class="lead">修改数据库配置并编译项目之后，部署到Tomcat应用服务器，然后启动Tomcat服务器，启动完成之后即可通过浏览器进行访问</p>
					<div class="bs-callout bs-callout-warning" id="jquery-required">
						<h4>关于JAR包</h4>
						<p>
							由于HteOS使用了tomcat实现的websocket技术开发了一个简单的即时通讯应用，所以引用了两个tomcat的包
							<code>catalina.jar,tomcat-coyote.jar</code>
						</p>
						<p>
							在部署完成之后，应该在项目的部署路径：
							<code>{TOMCAT_HOME}/webapps/hteos/WEB-INF/lib</code>
							下删除这两个jar包，否则无法启动。
						</p>
					</div>
				</div>

				<div class="bs-docs-section">
					<h1 id="disable-responsive" class="page-header">应用管理</h1>

					<p class="lead">HteOS提供了一个简单的应用管理模块</p>
					<p>
						项目启动完成后，访问HteOS的管理模块，地址为：<a
							href="http://localhost:8080/hteos/dashboard" target="_blank"><code>http://localhost:8080/hteos/hteos/dashboard</code></a>
					</p>
					<div class="bs-callout bs-callout-warning" id="jquery-required">
						<h4>关于地址</h4>
						<p>
							路径中的http://localhost:8080/
							<code>hteos</code>
							/dashboard的hteos为项目路径，如果有更改请更改为修改后的项目路径
						</p>
					</div>
					<p>
						进入到页面之后，系统将要求输入用户名密码。默认的用户名：
						<code>admin@hteos.com</code>
						，密码：
						<code>hteos.com</code>
					</p>
					<p>登录之后，进入到控制台，控制台默认打开应用管理界面</p>
					<div class="row">
						<div class="col-md-12">
							<p class="thumbnail">
								<img src="images/app_manager.png">
							</p>
						</div>
					</div>
					<p>
						点击
						<button type="button" class="btn btn-success small">
							<span class="glyphicon glyphicon-plus"></span> 创建
						</button>
						按钮打开创建应用界面
					</p>
					<div class="row">
						<div class="col-md-12">
							<p class="thumbnail">
								<img src="images/app_create.png">
							</p>
						</div>
					</div>
					<p>左边的第一个标签页为应用的基本信息</p>
					<div class="bs-callout bs-callout-info">
						<h4>关于默认应用和系统应用</h4>
						<p>
							如果选择了默认应用，用户在注册的时候就会自动安装该应用<br /> 如果选择的是系统应用，也会自动安装，并且该应用不能卸载
						</p>
					</div>
					<p>
						特殊处理标记是用户对应用磁贴进行特殊处理，现在包括音乐播放器、图片新闻、股票、新浪新闻都是基于该属性开发的，详细代码参见：
						<code>hteos/WebRoot/js/hteos/hteos-v1.1-dev.js</code>
						，如果设置了该属性，则应用对应的磁贴的DOM上会添加属性
						<code>data-toggle=特殊标记</code>
						，以便程序对其进行特殊处理。
					</p>
					<p class="alert alert-warning" role="alert">
						远程加载选项的功能暂时还未实现，以后将会开发出相应的功能</p>
					<p>选择样式设计选项卡可对应用的磁贴进行样式设计</p>
					<div class="row">
						<div class="col-md-12">
							<p class="thumbnail">
								<img src="images/app_create2.png">
							</p>
						</div>
					</div>
					<p>在这个界面中主要可以对磁贴的样式、尺寸、文字颜色、背景颜色、图标和背景图片进行设置，磁贴说明和磁贴说明展示为冗余设计。</p>
					<p>下面介绍事件处理选项卡</p>
					<div class="row">
						<div class="col-md-12">
							<p class="thumbnail">
								<img src="images/app_create3.png">
							</p>
						</div>
					</div>
					<p>点击事件分为两种，一：打开资源、二：执行脚本。</p>
					<ul>
						<li>如果选择的是打开资源，则会创建应用窗口并在窗口中引入设置的资源路径。</li>
						<li>如果选择的是执行脚本，则会执行填写的脚本</li>
					</ul>
					<div class="bs-callout bs-callout-warning" id="jquery-required">
						<h4>关于侧边栏</h4>
						<p>
							如果要使用侧边栏打开资源则需要将点击事件设置为：打开资源，并设置特殊处理标记为：
							<code>dock</code>
							，详细参见代码：
							<code>hteos/WebRoot/js/hteos/hteos.metro.js</code>
							第59行，这个设计有点不合理，后续版本将会优化，新增打开方式选项，设置为是窗口还是侧边栏。
						</p>
					</div>
					<p class="alert alert-success" role="alert">
						应用创建之后就可以在应用市场中进行安装</p>
				</div>

				<!-- Cross link to new migration page -->

				<div class="bs-docs-section" id="migration">
					<h1 id="support" class="page-header">桌面启动分析</h1>
					<p class="lead">首页最上面的代码设置项目的上下文路径</p>
					<p>
					<pre>
<%
	String ctx = request.getContextPath();
	request.setAttribute("ctx", ctx);
%>						
					</pre>
					</p>
					<p>在第49行中使用js变量将Session中的信息转到了页面中
					<pre>
&ltscript type="text/javascript">
	var ctx = "${ctx}", HteOS = {};
	//初始话与用户对象
	HteOS.User = {
		name : "${ACCOUNT.nickName}",
		face : "${ACCOUNT.face}",
		wallpaper : "${ACCOUNT.wallpaper}" || "images/wallpaper.jpg"
	}
	var panel = document.getElementById("hte-preloader-panel");
	var marginTop = ((document.body.offsetHeight - panel.offsetHeight) / 2) - 50;
	panel.style.marginTop = marginTop > 0 ? marginTop : 200;
&lt/script>
							
						</pre>
					</p>
					<p>
						整个桌面去的启动代码在
						<code>hteos/WebRoot/js/hteos/hteos.metro.js</code>
					<pre>
// 页面在加载完成后启动桌面
$(document.body).ready(function() {

	//显示壁纸
	var img = $("&ltimg class=\"hte-wallpaper-image\" src=\""
			+ HteOS.User.wallpaper + "\" >");
	$(".hte-wallpaper").append(img);
	img.load(function() {
				img.fadeIn();
			});

	if ($.is.isIE8) {
		$("body").addClass("hte-ie8");
	}

	// 初始化应用管理器
	HteOS.AppManager.init();

	// 初始化窗口管理器
	HteOS.WindowManager.init();

	// 初始化任务栏
	HteOS.Taskbar.init();

	// 初始化菜单管理器
	HteOS.MenuManager.init();

	// 初始化通知组件
	HteOS.Notification.init();

	// 初始化用户信息
	HteOS.User.init();

	// 启动工具提示
	if ($.is.advance) {
		$(document.body).tooltip({
					selector : "[data-toggle=tooltip]",
					container : "body"
				});
	}
});
							
						</pre>
					</p>
					<p>
						在这段代码中，初始化了一系列的组件。获取应用列表并展示在桌面上的方法是
						<code>HteOS.AppManager.init();</code>
						，下面来看这段代码：
					</p>
					<p>
					<pre>
/**
 * 初始化操作，从后台获取应用，并监听排序事件
 */
init : function() {
	$(".hte-preloader-text").text("正在加载应用...");
	
	//加载应用
	this.load();
	
	//点击磁贴时执行应用
	$(document.body).on("click", ".tile", function(event) {
				HteOS.AppManager.execute($(this));
				event.stopPropagation();
			});
	
	//处理快速启动，可以通过设置data-launcher属性来启动应用
	$(document.body).on("click", "[data-launcher]", function(event) {
		var launcher = $(this).data("launcher"), app = HteOS.AppManager
				.getByKey(launcher);
		if (app) {
			app.execute();
		}
		event.stopPropagation();
	});
	// 如果发生排序事件
	$(document).on("hte.app.sort", this.sort);
},
							
						</pre>
					</p>
					<p>
						在这段代码中主要是进行一些事件的注册以及监听，最主要的部分是
						<code>this.load()</code>
						，
						<code>load</code>
						方法中，程序向后台获取应用列表。
					</p>
					<p>
					<pre>
/**
 * 获取当前用户所安装应用数据，如果没有登录，后台将返回所有默认应用
 */
load : function() {
	$.getJSON(ctx + "/metro/app/get", function(data) {
		var apps = data.apps;
		var prev;
		for (var i = 0; i < apps.length; i++) {
			//创建应用
			var app = new HteOS.App(apps[i]);
			if (prev) {
				prev.next = app;
			}
			prev = app;
		}
		//初始化桌面
		HteOS.Metro.init();
		//初始化快速启动栏
		HteOS.Quickbar.init(data.quickstart);
		//初始化应用管理组件
		HteOS.Overview.init();
	});
},
							
						</pre>
					</p>
					<p>
						在
						<code>load</code>
						方法中，向后台获取数据，后去数据之后将创建应用实例，并启动桌面、快速启动栏、应用管理等组件，这样桌面启动完成。
					</p>
				</div>

			</div>
			<div class="col-md-3">
				<div
					class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top"
					role="complementary">
					<ul class="nav bs-docs-sidenav">

						<li class="active"><a href="#env">运行环境</a></li>
						<li><a href="#whats-included">项目结构</a></li>
						<li><a href="#grunt">项目导入</a></li>
						<li><a href="#template">连接数据库</a></li>
						<li><a href="#examples">启动</a></li>
						<li><a href="#community">应用管理</a></li>
						<li><a href="#migration">桌面启动分析</a></li>
						</li>
					</ul>
					<a class="back-to-top" href="#top"> 返回顶部 </a>

				</div>
			</div>
		</div>
	</div>
	<!-- Footer ================================================== -->
	<footer class="bs-docs-footer" role="contentinfo">
		<div class="container">


			<p>&copy; HteOS_Team 版权 本文档最终解释权归HteOS所有</p>
			<p>该文档仅对已授权用户负责，未授权用户不予支持</p>
			<p></p>
			<ul class="bs-docs-footer-links muted">
				<li>当前版本： v1.2.2</li>
				<li>·</li>
				<li><a href="http://www.hteos.com">HteOS网站</a></li>
				<li>·</li>
				<li><a href="http://demo.hteos.com">演示站点</a></li>
				<li>·</li>
				<li><a href="http://blog.hteos.com/">官方博客</a></li>
				<li>·</li>
				<li><a href="http://www.hteos.com/about.jsp">关于</a></li>
				<li>·</li>
			</ul>
		</div>
	</footer>

	<!-- Bootstrap core JavaScript
================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/docs.min.js"></script>
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	<script src="js/ie10-viewport-bug-workaround.js"></script>
	<!-- Analytics
================================================== -->
	<script src="js/h.js" type="text/javascript"></script>

</body>
</html>